import { useEventListener } from 'ahooks';
import { useEffect, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
const CANVAS_MAX_WIDTH = 1226;
const CANVAS_HEIGHT = 260;

function LineChart() {
  const canvas = useRef<HTMLCanvasElement>(null);
  const {t}=useTranslation();
  const [canvasWidth, setCanvasWidth] = useState(
    Math.min(CANVAS_MAX_WIDTH, window.innerWidth - 50)
  );
  useEventListener('resize', () =>
    setCanvasWidth(Math.min(CANVAS_MAX_WIDTH, window.innerWidth - 50))
  );

  useEffect(
    () => draw(canvas.current as HTMLCanvasElement, canvasWidth),
    [canvasWidth]
  );

  return (
    <>
      <div className="flex w-full justify-between text-12 leading-140 md:pl-10 md:pr-20 md:text-14">
        <div>{t('incomeStatement')}</div>
        <ul className="flex space-x-2 md:space-x-10">
          <li className="font-semibold">12 Months</li>
          <li>6 Months</li>
          <li>30 Days</li>
          <li>7 Days</li>
        </ul>
      </div>
      <canvas ref={canvas}></canvas>
      <div className="flex w-full justify-between text-12 leading-140 md:pl-10 md:pr-20 md:text-14">
        <div className="flex space-x-4">
          <div>&lt;</div>
          <div className="font-semibold">2023</div>
        </div>
        <div className="flex space-x-4">
          <div className="font-semibold">2024</div>
          <div>&gt;</div>
        </div>
      </div>
    </>
  );
}

function draw(canvas: HTMLCanvasElement, canvasWidth: number) {
  const ctx = canvas.getContext('2d');

  if (!ctx) {
    console.warn('There is no canvas context 2d????');
    return;
  }

  const xAxis = [
    'Jan',
    'Feb',
    'Mar',
    'Apr',
    'May',
    'Jun',
    'Jul',
    'Aug',
    'Sep',
    'Oct',
    'Nov',
    'Dec',
  ];
  const yAxis = ['100k', '75k', '50k', '25k', '0'];
  const values = [
    24500, 26000, 20000, 46000, 45591, 52000, 50000, 46000, 65000, 98000, 78000,
    71000,
  ];
  const valueMin = 0;
  const valueMax = 100000;

  function setupCanvasSize() {
    const ratio = devicePixelRatio || 1;

    canvas.width = canvasWidth * ratio;
    canvas.height = CANVAS_HEIGHT * ratio;
    canvas.style.width = `${canvasWidth}px`;
    canvas.style.height = `${CANVAS_HEIGHT}px`;

    return {
      dataViewXStart: 10 * ratio,
      dataViewXEnd: (canvasWidth - 50) * ratio,
      dataViewYStart: 10 * ratio,
      dataViewYEnd: (CANVAS_HEIGHT - 50) * ratio,

      xTickYPos: (CANVAS_HEIGHT - 10) * ratio,
      yTickGap: 50 * ratio,
      yTickOffsetX: 20 * ratio,
      yTickOffsetY: 14 * ratio,

      tickFontSize: (canvasWidth > 500 ? 14 : 12) * ratio,
      dataLineWidth: 3 * ratio,
      yTickDashLineWidth: 1 * ratio,
    };
  }
  const {
    dataViewXStart,
    dataViewXEnd,
    dataViewYStart,
    dataViewYEnd,
    xTickYPos,
    yTickGap,
    yTickOffsetX,
    yTickOffsetY,
    tickFontSize,
    dataLineWidth,
    yTickDashLineWidth,
  } = setupCanvasSize();

  function mappingValue(value: number) {
    const ans =
      ((dataViewYEnd - dataViewYStart) * value) / (valueMax - valueMin);
    return dataViewYEnd - ans;
  }

  const tickGap = (dataViewXEnd - dataViewXStart) / (xAxis.length - 1);
  function xPos(i: number) {
    return dataViewXStart + tickGap * i;
  }

  // 虛線
  ctx.lineWidth = yTickDashLineWidth;
  ctx.strokeStyle = '#7B7B7B';
  yAxis.forEach((_, i) => {
    ctx.beginPath();
    ctx.setLineDash([4, 6]);
    ctx.moveTo(dataViewXStart, dataViewYStart + i * yTickGap);
    ctx.lineTo(dataViewXEnd, dataViewYStart + i * yTickGap);
    ctx.stroke();
  });

  // y 軸標籤
  ctx.font = `${tickFontSize}px arial`;
  yAxis.forEach((text, i) => {
    ctx.fillText(
      text,
      dataViewXEnd + yTickOffsetX,
      yTickGap * i + yTickOffsetY
    );
  });

  // x 軸標籤
  ctx.textAlign = 'center';
  xAxis.forEach((text, i) => {
    ctx.fillText(text, xPos(i), xTickYPos);
  });

  // 線
  ctx.setLineDash([]);
  ctx.lineWidth = dataLineWidth;
  ctx.strokeStyle = '#77D6B4';
  values.forEach((value, i) => {
    if (i + 1 === values.length) {
      return;
    }
    ctx.beginPath();
    ctx.moveTo(xPos(i), mappingValue(value));
    ctx.lineTo(xPos(i + 1), mappingValue(values[i + 1]));
    ctx.stroke();
  });

  // 線下色塊
  ctx.beginPath();
  ctx.moveTo(dataViewXStart, dataViewYEnd);
  values.forEach((_, i) => {
    ctx.lineTo(xPos(i), mappingValue(values[i]));
  });
  ctx.lineTo(xPos(values.length - 1), dataViewYEnd);
  ctx.closePath();
  ctx.fillStyle = 'rgba(238, 242, 255, 0.5)';
  ctx.fill();
}

export default LineChart;
